import * as THREE from 'three';
import "./style.css"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

let dpr = window.devicePixelRatio

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);

// 添加环境光
const amblight = new THREE.AmbientLight(0xff00ff, 0.5);
scene.add(amblight)

// 添加平行光
let dlight = new THREE.DirectionalLight(0xffffff, 1)
dlight.position.set(2, 3, 2)
dlight.castShadow = true;
scene.add(dlight)

// let dirhelper = new THREE.DirectionalLightHelper(dlight, 1, 0xff0000)
// scene.add(dirhelper)

// 添加一个半球光
let hlight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 1);
hlight.position.set(0, 5, 0)
let hhe = new THREE.HemisphereLightHelper(hlight, 1)
scene.add(hlight, hhe);

// 添加一个点光源
// let plight = new THREE.PointLight(0xffffff, 1, 100, 2);
// plight.position.set(2, 2, 4);
// scene.add(plight);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth * dpr, window.innerHeight * dpr, false);
document.getElementById("app").appendChild(renderer.domElement);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI;

// 创建立方体
const geometryCube = new THREE.BoxGeometry(1, 1, 1);
const textureLoader = new THREE.TextureLoader();
const cubeTexture = textureLoader.load('https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/56916109298/a8df/16db/7601/110f082c7075f30b8743c02e525309b8.png');
const materialCube = new THREE.MeshStandardMaterial({ 
  map: cubeTexture,
  roughness: 0.5,
  metalness: 0.5,
});
const cube = new THREE.Mesh(geometryCube, materialCube);
cube.receiveShadow = true;
scene.add(cube);

// 创建球体
const geometrySphere = new THREE.SphereGeometry(0.5, 32, 32);
const materialSphere = new THREE.MeshStandardMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(geometrySphere, materialSphere);
sphere.position.x = 2;
scene.add(sphere);

// 绘制一个甜甜圈
const geometryTorus = new THREE.TorusGeometry(1, 0.2, 16, 100);
const materialTorus = new THREE.MeshStandardMaterial({ color: 0x00f000 });
const torus = new THREE.Mesh(geometryTorus, materialTorus);
torus.position.x = 0;
torus.castShadow = true;
scene.add(torus);

// 添加XYZ轴辅助
const axesHelper = new THREE.AxesHelper(5.2);
scene.add(
  axesHelper,
  new THREE.GridHelper(10, 10)
);

// 创建射线
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

// 监听鼠标点击事件
window.addEventListener('click', (event) => {
  console.log(event)
  // 计算鼠标在归一化设备坐标中的位置
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera(pointer, camera);

  // 创建一个射线可视化的几何体
  const rayGeometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(),
    new THREE.Vector3(0, 0, 1000)
  ]);
  const rayMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
  const rayLine = new THREE.Line(rayGeometry, rayMaterial);
  
  // 设置射线的起点和方向
  rayLine.position.copy(raycaster.ray.origin);
  rayLine.rotation.copy(camera.rotation);
  
  // 移除之前的射线（如果存在）
  const oldRay = scene.getObjectByName('ray');
  if (oldRay) scene.remove(oldRay);
  
  // 添加新的射线
  rayLine.name = 'ray';
  scene.add(rayLine);
});


// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();